{% extends "pretixpresale/event/checkout_base.html" %}
{% load i18n %}
{% load bootstrap3 %}
{% load form_widget_filters %}
{% load rich_text %}
{% block inner %}
    <p>{% trans "Before we continue, we need you to answer some questions." %}</p>
    <p class="required-legend" aria-hidden="true">
        {% blocktrans trimmed %}
            You need to fill all fields that are marked with <span>*</span> to continue.
        {% endblocktrans %}
    </p>
    <form class="form-horizontal" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="panel-group" id="questions_group">
            <details class="panel panel-default" open>
                <summary class="panel-heading">
                    <h4 class="panel-title">
                        <strong>{% trans "Contact information" %}</strong>
                        <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                    </h4>
                </summary>
                <div id="contact">
                    <div class="panel-body">
                        {% bootstrap_form contact_form layout="checkout" %}
                        {% if not invoice_address_asked and event.settings.invoice_name_required %}
                            {% bootstrap_form invoice_form layout="checkout" %}
                        {% endif %}
                    </div>
                </div>
            </details>
            {% if invoice_address_asked %}
                <details class="panel panel-default" {% if event.settings.invoice_address_required or event.settings.invoice_name_required %}open{% endif %}>
                    <summary class="panel-heading">
                        <h4 class="panel-title">
                            <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
                                {% trans "(optional)" %}
                            {% endif %}</strong>

                            <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                        </h4>
                    </summary>
                    <div id="invoice">
                        <div class="panel-body">
                            {% if event.settings.invoice_address_explanation_text %}
                                <div>
                                    {{ event.settings.invoice_address_explanation_text|rich_text }}
                                </div>
                            {% endif %}
                            {% bootstrap_form invoice_form layout="checkout" %}
                        </div>
                    </div>
                </details>
            {% endif %}

            {% for pos, forms in formgroups %}
                <details class="panel panel-default" open>
                    <summary class="panel-heading">
                        <h4 class="panel-title">
                            <strong>{{ pos.product.name }}</strong>
                            {% if pos.variation %}
                                – {{ pos.variation }}
                            {% endif %}
                            {% if forloop.counter > 1 %}
                                <span class="text-right flip">
                                    {% if event.settings.checkout_show_copy_answers_button %}
                                        <button type="button" data-id="{{ forloop.counter0 }}" name="copy"
                                                class="js-copy-answers btn btn-default btn-xs">{% trans "Copy answers from above" %}</button>
                                    {% endif %}
                                    <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                                </span>
                            {% else %}
                                <i class="fa fa-angle-down collapse-indicator" aria-hidden="true"></i>
                            {% endif %}
                        </h4>
                    </summary>
                    <div>
                        <div class="panel-body questions-form">
                            {% if event.settings.attendee_data_explanation_text and pos.product.admission %}
                                {{ event.settings.attendee_data_explanation_text|rich_text }}
                            {% endif %}
                            {% if pos.seat %}
                                <div class="form-group">
                                    <label class="col-md-3 control-label">
                                        {% trans "Seat" %}
                                    </label>
                                    <div class="col-md-9 form-control-text">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 4.7624999 3.7041668" class="svg-icon">
                                            <path
                                                    d="m 1.9592032,1.8522629e-4 c -0.21468,0 -0.38861,0.17394000371 -0.38861,0.38861000371 0,0.21466 0.17393,0.38861 0.38861,0.38861 0.21468,0 0.3886001,-0.17395 0.3886001,-0.38861 0,-0.21467 -0.1739201,-0.38861000371 -0.3886001,-0.38861000371 z m 0.1049,0.84543000371 c -0.20823,-0.0326 -0.44367,0.12499 -0.39998,0.40462997 l 0.20361,1.01854 c 0.0306,0.15316 0.15301,0.28732 0.3483,0.28732 h 0.8376701 v 0.92708 c 0,0.29313 0.41187,0.29447 0.41187,0.005 v -1.19115 c 0,-0.14168 -0.0995,-0.29507 -0.29094,-0.29507 l -0.65578,-10e-4 -0.1757,-0.87644 C 2.3042533,0.95300523 2.1890432,0.86500523 2.0641032,0.84547523 Z m -0.58549,0.44906997 c -0.0946,-0.0134 -0.20202,0.0625 -0.17829,0.19172 l 0.18759,0.91054 c 0.0763,0.33956 0.36802,0.55914 0.66042,0.55914 h 0.6015201 c 0.21356,0 0.21448,-0.32143 -0.003,-0.32143 H 2.1954632 c -0.19911,0 -0.36364,-0.11898 -0.41341,-0.34107 l -0.17777,-0.87126 c -0.0165,-0.0794 -0.0688,-0.11963 -0.12557,-0.12764 z"/>
                                        </svg>
                                        {{ pos.seat }}
                                    </div>
                                </div>
                            {% endif %}
                            {% if pos.addons.all %}
                                <div class="form-group">
                                    <label class="col-md-3 control-label">
                                        {% trans "Selected add-ons" %}
                                    </label>
                                    <div class="col-md-9 form-control-text">
                                        <ul class="addon-list">
                                            {% for a in pos.addons.all %}
                                                <li>{{ a.product.name }}{% if a.variation %} – {{ a.variation.value }}{% endif %}</li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            {% endif %}
                            {% if pos.subevent %}
                                <div class="form-group">
                                    <label class="col-md-3 control-label">
                                        {% trans "Date" context "subevent" %}
                                    </label>
                                    <div class="col-md-9 form-control-text">
                                        <ul class="addon-list">
                                            {{ pos.subevent.name }} &middot; {{ pos.subevent.get_date_range_display }}
                                            {% if pos.event.settings.show_times %}
                                                <span data-time="{{ pos.subevent.date_from.isoformat }}" data-timezone="{{ request.event.timezone }}">
                                                    <span class="fa fa-clock-o" aria-hidden="true"></span>
                                                    {{ pos.subevent.date_from|date:"TIME_FORMAT" }}
                                                </span>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </div>
                            {% endif %}
                            {% for form in forms %}
                                {% if form.pos.product != pos.product %}
                                    {# Add-Ons #}
                                    <legend>
                                        {% if form.show_copy_answers_to_addon_button and event.settings.checkout_show_copy_answers_button %}
                                            <span class="pull-right flip">
                                                <button type="button" data-id="{{ forloop.parentloop.counter0 }}" data-addonid="{{ forloop.counter0 }}" name="copy" class="js-copy-answers-addon btn btn-default btn-xs">{% trans "Copy answers" %}</button>
                                            </span>
                                        {% endif %}
                                        + {{ form.pos.product.name }}{% if form.pos.variation %} – {{ form.pos.variation.value }}{% endif %}
                                    </legend>
                                {% endif %}
                                <div data-idx="{{ forloop.parentloop.counter0 }}" data-addonidx="{{ forloop.counter0 }}">
                                    {% for field in form %}
                                        {% if field|is_checkbox_input %}
                                            <div class="form-group {% if field.errors %}has-error{% endif %}">
                                                <label class="col-md-3 control-label">
                                                    {{ field.label }}
                                                    {% if field.field.required %}<span class="text-primary">*</span>{% endif %}
                                                </label>
                                                <div class="col-md-9">
                                                    <div class="checkbox">
                                                        <label>{{ field }}</label>
                                                    </div>
                                                    {% if field.help_text %}
                                                        <span class="help-block text-muted">{{ field.help_text }}</span>
                                                    {% endif %}
                                                    {% for error in field.errors %}
                                                        <p class="help-block text-danger">{{ error }}</p>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% elif field.field.widget.attrs.type == "description" %}
                                            <div class="form-group">
                                                <label class="col-md-3 control-label">{{field.label}}</label>
                                                <div class="col-md-9">
                                                    <label class="form-control-text text-left">{{field.value}}</label>
                                                </div>

                                                <!-- <label  class="col-md-12">{{field.label}}.{{field.value}}</label> -->
                                                
                                            </div>
                                        {% else %}
                                            {% bootstrap_field field layout="checkout" %}
                                        {% endif%}
                                    {% endfor %}

                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </details>
            {% endfor %}
        </div>
        <div class="row checkout-button-row">
            <div class="col-md-4 col-sm-6">
                <a class="btn btn-block btn-default btn-lg"
                        href="{{ prev_url }}">
                    {% trans "Go back" %}
                </a>
            </div>
            <div class="col-md-4 col-md-offset-4 col-sm-6">
                <button class="btn btn-block btn-primary btn-lg" type="submit">
                    {% trans "Continue" %}
                </button>
            </div>
            <div class="clearfix"></div>
        </div>
    </form>
{% endblock %}
